<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <el-button @click="go" icon="el-icon-back" type="text" style="margin-bottom:20px;">返回</el-button>
       <el-row :gutter="24">
        <el-col :span="8">
          <div style="font-size:20px;">{{name}}</div>
        </el-col>
      </el-row>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="fileName" label="图片名称" width="150px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTimeStr" label="上传日期" show-overflow-tooltip></el-table-column>
        <el-table-column prop="url" label="图片">
            <template slot-scope="scope">
                 <el-image 
                    style="width: 40px; height: 40px"
                    :src="scope.row.url"
                    :preview-src-list="[scope.row.url]">
                </el-image>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button type="text" size="mini" @click="removeItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 查看弹框区域 -->
    </el-card>
  </div>
</template>

<script>
import base from "../api/base"
export default {
  data() {
    return {
      name: '',
      tableData: [],
      labelPosition: "left", // 表单标签文字位置
      currentPage: 1,
      pageSize: 10,
      total: 0,
      projectId:''
    };
  },
  created() {
    if(this.$route.query.data.projectName)
    localStorage.setItem('name',this.$route.query.data.projectName)
    this.name = localStorage.getItem('name')
    if(this.$route.query.data.projectId)
    localStorage.setItem('projectId',this.$route.query.data.projectId)
    this.projectId = localStorage.getItem('projectId')
    this.getList()
  },
  mounted() {
  },
  methods: {
    //返回
    go () {
      this.$router.go(-1)
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    removeItem(val) {
        this.$confirm('此操作将删除航拍图, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.loginhome.del({logId:val}).then(res => {
              if(res.success) {
                  this.$message.success('删除成功')
                  this.getList()
              } else {
                  this.$message.error(res.message)
              }
          })
        }) 
    },
    getList() {
        let params = {
            projectId:localStorage.getItem('projectId')|| this.projectId,
            start: this.currentPage - 1,
            pageSize: this.pageSize
        }
        this.$api.loginhome.airList(params).then(res => {
            if(res.success) {
                res.data.map(v => {
                    // v.url = 'http://124.226.194.221:38082/msa-file' + v.path
                    v.url = `${base.spurl}/msa-file${v.path}`
                })
                this.tableData = res.data
                this.total = res.recordsTotal
            }
        })
    }
  }
};
</script>

<style scoped>
.el-pagination {
  padding-top: 20px;
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background: #e4e4e4;
}
/deep/.el-table thead {
  color: #7a7c80;
}
/deep/.el-input-group__append button.el-button {
  background-color: #409eff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 32px;
}
/deep/.el-input-group__append .el-button {
  padding: 10px 20px;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  color: #ffffff;
}
/deep/.el-table td,
.el-table th {
  text-align: center;
}
/deep/.el-table th > .cell {
  text-align: center;
}
/deep/.el-col-16 {
  text-align: right;
}
/deep/.el-dialog__body {
  margin: -35px 0px;
}
.con_dialog h4 {
  margin: 7px 0px 7px 30px;
}
.con_dialog p {
  margin: 7px 0px 7px 60px;
  font-size: 12px;
}
.mapbox {
  width: 610px;
  height: 220px;
  background: gainsboro;
  margin: 10px 0px 7px 60px;
}
.time_span {
  text-align: right;
  padding: 10px 48px 10px 10px;
}
.botton_btn {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
/deep/.el-image-viewer__close{
  color: red;
}
</style>
